// NOTE some CSS is duplicated here between Checkbox.scss and Radio.scss. We
// may want to set up a way to share those CSS properties at some point.

.radio {
  --size: var(--radio-size, 1em);
  --hue: var(--radio-hue, 212);
  --saturation: var(--radio-saturation, 84%);
  --base-lightness: var(--radio-lightness, 44.1%);

  --lightness: var(--base-lightness);
  --color-unchecked: hsl(0, 0%, var(--lightness));
  --color-checked: hsl(var(--hue), var(--saturation), var(--lightness));
  --icon-donut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle r='35' cx='50' cy='50' fill='none' stroke='white' stroke-width='25'/%3E%3C/svg%3E");
  font-size: inherit;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0 -0.1em 0;
  width: var(--size);
  height: var(--size);
  appearance: none;
  border: solid var(--color-unchecked) 0.1em;
  border-radius: 50%;
  background: white;

  &:not(:disabled):not(:checked):hover {
    --lightness: calc(var(--base-lightness) - 15%);
  }
  &:disabled {
    --lightness: calc(var(--base-lightness) + 25%);
  }
  &:disabled:not(:checked) {
    background: hsl(0, 0%, 97%);
  }

  &:checked {
    border-color: var(--color-checked);
    background: var(--color-checked);
    background-image: var(--icon-donut);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1em auto;
  }

  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }
}
